<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>基于MUI封装常用弹窗</title>
    <script th:replace="common/head::static"></script>
    <!-- 引入自定义键盘 -->
    <link rel='stylesheet' th:href="@{/common/keyboard/keyboard.css}"/>
    <script th:src="@{/common/keyboard/keyboard.js}"></script>
    <style>
        body{
            text-align: center;
        }

        .mui-btn{
            width: 50%;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <button class="mui-btn" onclick="HuanziDialog.show('#top')">上</button>
    <button class="mui-btn"  onclick="HuanziDialog.show('#bottom')">下</button>
    <button class="mui-btn"  onclick="HuanziDialog.show('#left')">左</button>
    <button class="mui-btn"  onclick="HuanziDialog.show('#right')">右</button>
    <button class="mui-btn"  onclick="HuanziDialog.show('#center')">居中</button>
    <button class="mui-btn"  onclick="HuanziDialog.alert('系统提示','我是警告框！',function() {console.log('你已确认警告！')})">警告框</button>
    <button class="mui-btn"  onclick="HuanziDialog.confirm('系统提示','确认要XXX吗？',function() {HuanziDialog.toast('你点击了确认！');console.log('很好，你点击了确认！')})">确认框</button>
    <button class="mui-btn"  onclick="HuanziDialog.toast('提交成功')">自动消失提示框</button>
    <input type="text"
           data-type="1"
           maxlength="15"
           data-assignEventNode="buyMoney"
           class=" libh_input libh_key_board  mui-btn"
           style="width: 50%"
           placeholder="点击打开自定义键盘"
           readonly
           autocomplete="off"
           onclick="window.keyBoard({type: 1,eventNode:this})"
    >
    <button class="mui-btn" onclick="window.location.href = 'https://www.baidu.com';">跳转百度</button>
    <button class="mui-btn" onclick="barcode()">扫描二维码</button>
    <button class="mui-btn" onclick="openWindow()">打开新页面</button>
    <button class="mui-btn">无用按钮</button>
    <button class="mui-btn">无用按钮</button>
    <button class="mui-btn">无用按钮</button>
    <button class="mui-btn">无用按钮</button>
    <button class="mui-btn">无用按钮</button>
    <button class="mui-btn">无用按钮</button>
    <button class="mui-btn">最后一个</button>

    <!-- 例如弹窗等内容，需要放在外面 -->
    <div>
        <!-- 上 -->
        <div id="top" class="huanzi-dialog huanzi-dialog-top" style="height: 250px">
            <h5>我从上边弹出</h5>
        </div>

        <!-- 下 -->
        <div id="bottom" class="huanzi-dialog huanzi-dialog-bottom" style="height: 250px">
            <h5>我从下边弹出</h5>
        </div>

        <!-- 左 -->
        <div id="left" class="huanzi-dialog huanzi-dialog-left">
            <h5>我从左边弹出</h5>
        </div>

        <!-- 右 -->
        <div id="right" class="huanzi-dialog huanzi-dialog-right">
            <h5>我从右边弹出</h5>
        </div>

        <!-- 居中 -->
        <div id="center" class="huanzi-dialog huanzi-dialog-center" style="width: 65%;height: 30%">
            <h5>我从中间弹出</h5>
        </div>
    </div>
</body>
<script th:src="@{/barcode/js/barcode.js}"></script>
</html>